<template>
  <van-row class ="toprow">
    <van-col span="2"><van-icon name="delete-o" @click="settiing()"/></van-col>
    <van-col span="22"><span v-show="!isweixin">{{props.title}}</span></van-col>
  </van-row>
  <!--
    <van-popup
        v-model:show="show"
        closeable
        position="top"
        class ="setting-popup"
        round
    >设置功能开发中，请稍后。。。</van-popup>
  -->
  <div v-for="(item, index) in resData" :key="index">
    <van-row  style="margin-bottom: 10px;">
      <van-col span="2"><van-icon name="manager" size="30"  style="padding:3px;" color="#1989fa"/></van-col>
      <van-col span="22"><span class="msgdiv">{{item.inputMsg}}</span></van-col>  
    </van-row>
    <van-row >
      <van-col span="22"><span class="resdiv"  v-html="item.resMsg"></span></van-col>
      <van-col span="2"><van-icon name="comment-circle" size="30" style="padding:3px;" color="#1989fa"/></van-col>
    </van-row>
  </div>
  <van-loading v-show="loading" color="#00c8ff" size="40px">加载中...</van-loading>
  <van-form @submit="onSubmit">
    <van-row class ="buttom-line">
      <van-col span="24">
          <van-cell-group inset>
            <van-field
              v-model="msg"
              name="msg"
              rows="2"
              autosize
              maxlength="200"
              show-word-limit
              placeholder="请输入消息"
              class ="settingpop"
              :rules="[{ required: true, message: '请输入消息' }]"
            />
          </van-cell-group>
      </van-col>
      
    </van-row>
  </van-form>
</template>

<script setup>
import { defineProps,ref,reactive,onMounted} from 'vue'
import { showToast } from 'vant';
import { sentChatMessage } from "@/api/chat";
import { getIsWxClient } from "@/utils/browser";

//父组件给子组件传递信息的时候需要
const props = defineProps(['title'])

//判断是否微信浏览器，如果是则不显示表头
let isweixin = ref(getIsWxClient());

//用户输入的信息
const msg = ref('');

//loading界面
let loading = ref(false);

//百度返回的信息样例
//let resMsg = ref('以下是 Java 中的起泡排序实现：\n\n\n```java\npublic class BubbleSort {\n\n    public static void main(String[] args) {\n        int[] arr = {5, 3, 8, 1, 6, 9, 2, 7, 4};\n        bubbleSort(arr);\n        System.out.println(Arrays.toString(arr));\n    }\n\n    public static void bubbleSort(int[] arr) {\n        int n = arr.length;\n        for (int i = 0; i \u003c n - 1; i++) {\n            for (int j = 0; j \u003c n - i - 1; j++) {\n                if (arr[j] \u003e arr[j + 1]) {\n                    // 交换相邻两个元素\n                    int temp = arr[j];\n                    arr[j] = arr[j + 1];\n                    arr[j + 1] = temp;\n                }\n            }\n        }\n    }\n}\n```\n在这个例子中，我们定义了一个 `bubbleSort` 函数，它接受一个整数数组并使用起泡排序对其进行排序。该算法使用两个嵌套的循环来比较和交换数组中的元素。外部循环迭代数组中的元素，而内部循环比较相邻的元素并交换它们，直到整个数组都被排序。\n\n在 `main` 函数中，我们定义了一个测试数组并调用 `bubbleSort` 函数来对其进行排序。最后，我们打印排序后的数组以验证算法是否正确地排序了数组。');
let resData = reactive([]);

onMounted(()=>{
  let ls = localStorage.getItem('resData');
  if(ls!=null && ls!=undefined && ls.length>0){
    //如果浏览器中有缓存记录，则从换从中获取运维信息
    resData.push(...JSON.parse(ls))
  }
  
})

//表单提交
const onSubmit = () => {
  loading.value =true;
  let obj = {};
  sentChatMessage(msg?.value)
    .then(function (response) {
      //将信息返回并显示，同时方式浏览器缓存
      obj.inputMsg = msg?.value;
      obj.resMsg  = settleMsg(response?.data)
      resData.push(obj)
      localStorage.setItem('resData',JSON.stringify(resData));
      loading.value = false;
    })
   .catch(function (error) {
      console.log(error);
      loading.value = false;
   });
};

function settleMsg (value){
  return value.replace(/(\n|\r|\r\n|↵)/g, '<br/>')
  .replace(new RegExp(/( )/g), '&nbsp;')
  .replace('```', '<div class="code">', "$0")
  .replace('```', '</div>', "$1")
  .replace('```', '<div class="code">', "$2")
  .replace('```', '</div>', "$3")      
}

//提示设置功能开发中
//const show = ref(false);

//清理缓存信息
const settiing =()=>{
  localStorage.clear();
  resData.length =0;
  msg.value ='';
  showToast({
    message: '缓存清理完成',
    position: 'top',
  });
}

</script>

<style scoped>


</style>
